<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>
        $(function (){
            let records = null;
            let pages = 1;
            let current = 0;
            let type = null

            function getPage(pageNum){

                if(pageNum<=0||pageNum>pages){
                    return
                }

                let table = $("#recordTable")
                table.empty()
                records = null

                $.ajax({
                        url: "/seller/time",
                        type: "post",
                        data: JSON.stringify({
                            "pageNum": pageNum,
                            "type": type,
                            "user": $("#user").val(),
                            "operate": $("#operate").val()
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {

                                pages = r.data.pages
                                $("#pageNum").attr("max", pages)

                                current = r.data.current
                                if(pages<=0){
                                    current=0
                                }

                                $("#pageNum").val(current)

                                records = r.data.records

                                if(current<=1){
                                    $("#btnLast").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnLast").parent("li").removeClass("disabled")
                                }

                                if(current>=pages){
                                    $("#btnNext").parent("li").addClass("disabled")
                                }
                                else{
                                    $("#btnNext").parent("li").removeClass("disabled")
                                }

                                for (let i = 0; i < records.length; i++) {
                                    let record = records[i]

                                    let t = "用户操作"
                                    if(type==1){
                                        t = "销售人员操作"
                                    }
                                    else if(type==2){
                                        t = "管理员操作"
                                    }

                                    op = record.operate.split(":")

                                    if(record.type==0||record.type==2||record.type==5){
                                        op[0]="登录"
                                    }
                                    else if(record.type==1||record.type==3||record.type==6){
                                        op[0]="登出"
                                    }

                                    table.append(
                                        "<tr>"+
                                        "<td><label>" + record.userid +"</label></td>"+
                                        "<td><label>" + record.time +"</label></td>"+
                                        "<td><label>" + record.ip +"</label></td>"+
                                        "<td><label>" + t +"</label></td>"+
                                        "<td><label>" + op[0] +"</label></td>"+
                                        "<td><label>" + (op[1]==null||op[1]===""?"--":op[1]) +"</label></td>"+
                                        "</tr>"
                                    )
                                }

                                $("#labelPage").text("     共 "+pages+" 页，当前第 "+current+" 页，跳转到")
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            $("#btnShowUser").click(
                function (){
                    type = 0
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                }
            )

            $("#btnShowSeller").click(
                function (){
                    type = 1
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                }
            )

            $("#btnShowAdmin").click(
                function (){
                    type = 2
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                }
            )

            $("#btnLast").click(
                function (){
                    getPage(current-1)
                }
            )

            $("#btnNext").click(
                function (){
                    getPage(current+1)
                }
            )

            $("#btnPage").click(
                function (){
                    getPage($("#pageNum").val())
                }
            )

            $("#btnClear").click(
                function (){
                    $("#user").val("")
                    $("#operate").val(0)
                    if(pages==0){
                        pages=1
                    }
                    getPage(1)
                }
            )

            $("input").attr("autocomplete", "off")
        })
    </script>
</head>
<body>
    <div class="page-header">
        <h3>
            操作日志
        </h3>
    </div>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button id="btnShowUser" class="btn btn-default">查看用户</button>
            <button id="btnShowSeller" class="btn btn-default">查看销售人员</button>
            <button id="btnShowAdmin" class="btn btn-default">查看管理员</button>
        </div>

        <div class="input-group" style="width: 20%">
            <span class="input-group-addon">id</span>
            <input class="form-control" id="user" type="text" value="" placeholder="输入查询的id">
        </div>

        <div class="input-group" style="width: 20%">
            <span class="input-group-addon">操作</span>
            <input id="operate" class="form-control" list="list">
            <datalist id="list">
                <option>登录</option>
                <option>登出</option>
                <option>添加购物车</option>
                <option>移除购物车</option>
                <option>购物车分页</option>
                <option>添加商品</option>
                <option>更新商品图片</option>
                <option>商品分页</option>
                <option>更新商品信息</option>
                <option>下架商品</option>
                <option>查看商品详情</option>
                <option>查看商品购买与浏览记录</option>
                <option>查看商品统计信息</option>
                <option>添加订单</option>
                <option>订单分页</option>
                <option>移除订单</option>
                <option>订单申诉</option>
                <option>订单发货</option>
                <option>首次创建销售账号</option>
                <option>修改销售账号</option>
                <option>查看销售员分页</option>
                <option>移除销售账号</option>
                <option>首次创建用户账号</option>
                <option>修改用户账号</option>
                <option>支付</option>
            </datalist>
        </div>
        <button id="btnClear" class="btn btn-danger">清空查询</button>
    </div>
    <div id="recordBox" class="table-responsive">
        <hr>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <td>id</td>
                <td>时间</td>
                <td>ip地址</td>
                <td>类型</td>
                <td>操作</td>
                <td>目标对象</td>
            </tr>
            </thead>
            <tbody id="recordTable">

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="recordPage">
                <li>
                    <a aria-label="Previous" id="btnLast">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" id="btnNext">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li style="display: inline">
                    <label for="pageNum" id="labelPage"></label>
                    <input type="number" id="pageNum" min="0" max="1" value="1">
                    <button type="button" class="btn btn-primary btn-xs" id="btnPage">跳转</button>
                </li>
            </ul>
        </nav>
    </div>

</body>
</html>